<template>
  <transition>
  <div class="app-referral-code">
    <section class="app-main">
      <div class="module-code">
        <span class="number" v-text="inviteCode"></span>
        <span class="tips">{{codeTips}}</span>
      </div>
      <!--<dl class="code-list">-->
        <!--<dt class="item-header">历史推荐码</dt>-->
        <!--<dd class="item">-->
          <!--TR8011<span class="date">2018.05.20-2018.05.22</span>-->
        <!--</dd>-->
        <!--<dd class="item">-->
          <!--TR9711<span class="date">2018.05.18-2018.05.20</span>-->
        <!--</dd>-->
      <!--</dl>-->
    </section>
  </div>
    </transition>
</template>

<script>
  import { Header,Cell } from 'mint-ui';

//  Vue.component(Header.name, Header);
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
      inviteCode:'',
      codeTips:'有效推荐码'
    }
  },
  mounted(){
    this.$axios({
      method: 'post',
      url:'gp/store/inviteCode',
    }).then((res)=>{
      console.log(res)
      this.inviteCode=res.data.obj
    if(res.data.obj==undefined){
      this.codeTips='暂无推荐码!'
    }
  });
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

  .app-referral-code .module-code {
    background: #fff;
    padding:40px 0; }
  .app-referral-code .module-code .number {
    display: block;
    font-size:40px ;
    color: #c34853;
    text-align: center;
    font-weight: bold;
    line-height:48px ; }
  .app-referral-code .module-code .tips {
    display: block;
    text-align: center;
    font-size:15px ;
    color: #999; }
  .app-referral-code .code-list{
    margin: 0;
  }
  .app-referral-code .item-header {
    padding:16px 12px 10px ;
    font-size: 16px ;
    font-weight: normal; }
  .app-referral-code .item-header:before {
    background: #c34853;
    position: relative;
    top:-1px;
    display: inline-block;
    vertical-align: middle;
    width:2px;
    height:15px ;
    content: '';
    margin-right:6px ; }
  .app-referral-code .item {
    background: #fff;
    margin: 0;
    padding:12px 16px ;
    font-weight: normal;
    border-bottom: 1px solid #eee;
    font-size:15px ; }
  .app-referral-code .item:last-child {
    border-bottom: none; }
  .app-referral-code .item .date {
    color: #999;
    float: right; }
</style>
